<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="div">
    this is text node!
</div>
<script>
    /**
     * 文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的
     *  HTML 字符，但不能包含 HTML 代码。 Text 节点具有以下特征：
     *   nodeType 的值为 3；
     *   nodeName 的值为"#text"；
     *   nodeValue 的值为节点所包含的文本；
     *   parentNode 是一个 Element；
     *   不支*持（没有）子节点。
     */

    // 默认情况下一个可以包含内容的元素最多只能有一个文本节点，并且这个文本节点必须有内容
    // <div></div> 这个就没有文本节点
    var div = document.getElementById("div");
    var textNode = div.firstChild;
    textNode.nodeValue = 'set node value by attr';
    // 如果直接输入 html 片段，会被转义

    // 我们可以创建文本节点，并且添加到已有元素中，这样可能会使这个元素拥有两个文本节点
    // 这两个文本节点的内容是直接链接起来的，很难区分
    var createdTextNode = document.createTextNode('create text node!');
    div.appendChild(createdTextNode);

    // 2
    console.info(div.childNodes.length);
    // 两个文本节点在一个元素里并且是相邻的，那么会造成混乱，所以提供了一种合并的方法
    div.normalize();
    // 1
    console.info(div.childNodes.length);

</script>
</body>
</html>